define([
    "dojo/_base/declare",
    "dijit/_Widget",
    "dijit/_Templated",
    "dojo/text!./RankingChart/template/chart.html",
    "dojo/_base/kernel",
    "dojox/charting/Chart",
    "dojox/charting/widget/Legend",
    "dojox/charting/plot2d/Bars",
    "dojox/charting/plot2d/Markers",
    "dojox/charting/axis2d/Default",
    "dijit/form/TextBox"],
    function(declare, _Widget,_Templated,templateHtml,dojo,Chart,Legend){
        return declare("widget.RankingChart",[_Widget,_Templated], {
            widgetsInTemplate: true,
            baseClass: "ranking-chart",
            templateString: templateHtml,
            chart:null,
            postCreate: function(){
                this.inherited(arguments);
            },
            
            setChart:function(){
                
            },
            
            _toNumber:function(x){
                var a = Number(x);
                return a?a:0;
            },
            
            render:function(){
                var chartData1 = [this._toNumber(this.input1.get("value"))];
                var chartData2 = [0,this._toNumber(this.input2.get("value"))];
                var chartData3 = [0,0,this._toNumber(this.input3.get("value"))];
                var chartData4 = [0,0,0,this._toNumber(this.input4.get("value"))];
                var chartData5 = [0,0,0,0,this._toNumber(this.input5.get("value"))];
                // Add the series of data
                this.chart.addSeries("PRICE",chartData1,{stroke: {color:"lightpink"},fill: "lightpink"});
                this.chart.addSeries("WEIGHT",chartData2,{stroke: {color:"lightyellow"},fill: "lightyellow"});
                this.chart.addSeries("PRACTICAL",chartData3,{stroke: {color:"lightblue"},fill: "lightblue"});
                this.chart.addSeries("DURABILITY",chartData4,{stroke: {color:"orange"},fill: "orange"});
                this.chart.addSeries("ERGONOMICS",chartData5,{stroke: {color:"lightgreen"},fill: "lightgreen"});
                this.chart.render();
            },
            
            initChart: function(){
                this.chart = new Chart(this.chartNode);
                this.chart.addPlot("default", {
                    type: "Bars",
                    markers: true,
                    gap: 2,
                    minBarSize:20,
                    maxBarSize:20
                });
                
                this.chart.addAxis("x", {fixUpper: "minor", fixLower:"minor",includeZero: true});
                this.chart.addAxis("y", {vertical: true, fixUpper: "minor",fixLower:"minor",includeZero: true});
                
//                dojo.connect(this.input1,"onChange",dojo.hitch(this,this.render));
//                dojo.connect(this.input2,"onChange",dojo.hitch(this,this.render));
//                dojo.connect(this.input3,"onChange",dojo.hitch(this,this.render));
//                dojo.connect(this.input4,"onChange",dojo.hitch(this,this.render));
//                dojo.connect(this.input5,"onChange",dojo.hitch(this,this.render));
            }
            
            
            
        });
    });